/*
 * @Description: 
 * @Author: Zhang Zhangda
 * @Date: 2021-02-25 16:56:21
 * @LastEditTime: 2021-02-27 07:32:24
 * @LastEditors: Zhang Zhaoda
 */
import {FC,useEffect,useRef} from 'react';
//引入样式
import TypeCss from "../css/type.module.scss"
//引入滑动
import BScroll from "better-scroll"

//引入数据类型验证
import {KeyInter} from "@/store/reducers/type.reducer";
import {List} from "@/interface/car.interface"
interface Iprops{
  typeData:KeyInter,
  typeKey:string,
  carIndex:number,
  code:string
  changeIndex:(key:string,index:number)=>void,
  jumpBack:(CarID: string)=>void
  
}

let TypeComponent:FC<Iprops>=function (props){
  //ref
  let bs = useRef<HTMLDivElement>(null)
  useEffect(() => {
   
    //横向滑动
    new BScroll(bs.current as HTMLDivElement, {
      scrollX: true,
      click: true
    })
  }, [])
  let {typeData,typeKey,carIndex,changeIndex,jumpBack,code}=props
  return <div>
    <p
      className={TypeCss.allcar}
      onClick={() => { jumpBack('') }}
      style={code==='img'?{display:'block'}:{display:'none'}}
    >
      全部车款
        </p>

    {/* tab切换 */}
    <div className={TypeCss.carTypes} ref={bs}>
      <div>
        {
          typeData&&Object.keys(typeData).map((item, index) => {
            return <span
              key={index}
              className={carIndex === index ? TypeCss.active : ''}
              onClick={() => { changeIndex(item,index)}}
            >
              {item}
            </span>
          })
        }
      </div>
    </div>
    {/* 内容 */}
    <div className={TypeCss.carContent}>
      {
        typeData && typeKey !== '' && typeData[typeKey] && Object.keys(typeData[typeKey]).map((item: string, index: number) => {
          return <div key={index}>
              <p>{item}</p>
            {
              typeData[typeKey][item].map((item1:List) => {
                return <ul
                  key={item1.car_id}
                  onClick={() => {jumpBack(item1.car_id)}}
                >
                  <li>
                  
                    <p>
                      <span>{item1.market_attribute.year} 款{item1.car_name}</span>
                      <span>{item1.market_attribute.dealer_price_min?item1.market_attribute.dealer_price_min+'起':item1.market_attribute.dealer_price}</span>
                      </p>
                    <p>
                      <span>{item1.trans_type}</span>
                      <span>指导价{item1.market_attribute.official_refer_price}</span>
                    </p>
                  </li>
                </ul>
              })
            }
          </div>
        })
      }
    </div>
  </div>
}

export default TypeComponent
 